<template>
	<view class="container">
		<!-- <navbar title="支付宝账号"></navbar> -->
		<view class="title">填写账号信息</view>
		<view class="input-wrap">
			<view class="input-item">
				<text>姓名：</text>
				<input type='text' placeholder="真实姓名" placeholder-class="pla" v-model="real_name"/>
			</view>
			<view class="input-item">
				<text>账号：</text>
				<input type='text' placeholder="账号" placeholder-class="pla" v-model="ali_num" />
			</view>
			
			<view class="input-item">
				<text>手机号：</text>
				<input type='num' placeholder="手机号" placeholder-class="pla" maxlength="11" v-model="mobile" style="width: 40%;" v-if="mobile_status == 0"/>
				<input type='num' placeholder="手机号" placeholder-class="pla" maxlength="11" v-model="mobile" disabled="false" style="width: 55%;" v-else/>
				<view class="mobile" v-if="mobile_status == 0">
					<button  @getphonenumber="getPhoneNumber" hover-class="none" open-type="getPhoneNumber" class="auth_mobile">
						授权微信绑定手机号
					</button>
				</view>
				<view class="mobile" v-else style="background: #f5f5f5!important; color: #333;">
					<view>
						已授权手机号
					</view>
				</view>
			</view>
		</view>
		<view class="tip">注：{{setting_account_name}}账号错误可能导致提现失败，请仔细填写</view>
		
		<!-- 支付按钮 -->
		<view class="pay_btn" @click="edit_alipay()">
			<view class="btn">
				确认
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				code: '',
				real_name: '',
				ali_num: '',
				mobile: '',
				userInfo: {},
				mobile_status: 0,
				setting_account_name:''
			};
		},
		onLoad() {
			this.getUserInfo()
		},
		methods:{
			// 获取授权的手机号
			getPhoneNumber(e) {
				this.code = e.detail
				let that = this;
				app.globalRequest({
					api: app.getApi().user.getMobile,
					data:{
						iv: that.code.iv,
						encryptedData: that.code.encryptedData
					},
					method: 'post'
				}).then(res => {
					that.mobile = res.phoneNumber
				}).catch(err => {
				
				})
			},
			

			
			
			// 获取支付宝的信息
			getUserInfo(){
				let that = this;
				app.globalRequest({
					api: app.getApi().user.getUserInfo,
				}).then(res => {
					if (res.code == 1) {
						that.real_name = res.data.uInfo.u_realname;
						that.ali_num = res.data.uInfo.alipay_login;
						that.setting_account_name = res.data.setting_account_name
						if( res.data.uInfo.mobile == '' || res.data.uInfo.mobile == null ){
							that.mobile_status = 0
						}else{
							that.mobile = res.data.uInfo.mobile;
							that.mobile_status = 1
						}
						
					}
				}).catch(err => {
				
				})
			},
			
			// 修改支付宝的信息
			edit_alipay(){
				let that = this;
				if( this.real_name == '' ){
					uni.showToast({
						title: '姓名不可为空',
						icon:'none'
					})
					return
				}
				if( this.ali_num == '' ){
					uni.showToast({
						title: '账号不可为空',
						icon:'none'
					})
					return
				}
				if( this.mobile == '' ){
					uni.showToast({
						title: '手机号不可为空',
						icon:'none'
					})
					return
				}
				if( this.mobile.length < 11 ){
					uni.showToast({
						title: '手机号格式不正确',
						icon:'none'
					})
					return
				}
				console.log(this.mobile)
				app.globalRequest({
					api: app.getApi().user.editAlipay,
					method: 'POST',
					data: {
						alipay: that.ali_num,
						mobile: that.mobile,
						realname: that.real_name
					},
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},1000)
					}
					
					if( res.code == 0 ){
						uni.showToast({
							title: res.msg,
							icon:'none'
						})
					}
				}).catch(err => {
				
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		padding:24rpx 28rpx;
	}
	.input-item{
		width: 100%;
		height: 100rpx;
		padding:0 28rpx;
		box-sizing: border-box;
		background: $dis-con-color;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&:last-of-type{
			margin-top:10rpx;
		}
		input{
			width: 85%;
			height: 100rpx;
		}
		.mobile{
			background: linear-gradient(82deg, #FF7040 0%, #EC1818 100%);
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #fff;
			border-radius: 20rpx;
		}
	}
	.pla{
		font-size: 26rpx;
		color:#E3E3E3;
	}
	.tip{
		padding:24rpx 28rpx;
		font-size: 24rpx;
		color:$dis-font-color;
	}
	.pay_btn{
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		padding: 10rpx 0 60rpx;
		box-sizing: border-box;
		.btn{
			width: 90%;
			background: linear-gradient(82deg, #FF7040 0%, #EC1818 100%);
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			height: 84rpx;
			line-height: 84rpx;
			margin: auto;
		}
	}
</style>
